<template>
  <div class="logout-button">
    <el-dropdown @command="handleCommand">
      <span class="el-dropdown-link">
        <el-icon class="setting-icon"><Setting /></el-icon>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item command="logout">
            <el-icon><SwitchButton /></el-icon>
            <span>注销登录</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
import { ElMessageBox } from 'element-plus';
import { Setting, SwitchButton } from '@element-plus/icons-vue';

const router = useRouter();

const handleCommand = (command) => {
  if (command === 'logout') {
    ElMessageBox.confirm('确定要注销登录吗?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      // 清除登录信息
      localStorage.removeItem('token');
      localStorage.removeItem('userRole');
      
      // 跳转到登录页面
      router.push('/login');
    }).catch(() => {
      // 取消操作
    });
  }
};
</script>

<style scoped>
.logout-button {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.setting-icon {
  font-size: 20px;
  color: #fff;
}

.el-dropdown-link {
  display: flex;
  align-items: center;
  cursor: pointer;
}
</style> 